<template>
  <div class='ebook'>
      <titlebar :ishow='ishow'></titlebar>
      <div class="read-wrapper">
          <div id="read"></div>
          <div class="mask">
              <div class="left" @click="prevPage"></div>
              <div class="center" @click="toggleIshow"></div>
              <div class="right" @click="nextPage"></div>
          </div>
      </div>
      <manubar 
        :ishow='ishow' 
        ref="menubar" 
        :fontSizeList="fontSizeList"
        :defaultFontSize="defaultFontSize"
        @setFontSize="setFontSize"
        :themeList="themesList"
        :defaultTheme="defaultTheme"
        @setTheme="setTheme"
      >
      </manubar>
  </div>
</template>

<script>
import Epub from 'epubjs'
import Titlebar from '@/components/titlebar'
import Manubar from '@/components/manubar'
const DOWNLOAD_URL='/book.epub'
global.ePub=Epub
export default {
    name:'Ebook',
    components:{
        Titlebar,
        Manubar
    },
    data(){
        return{
            ishow:false,
            fontSizeList:[
                {fontSize:12},
                {fontSize:14},
                {fontSize:16},
                {fontSize:18},
                {fontSize:20},
                {fontSize:22},
                {fontSize:24},
            ],
            defaultFontSize:16,
            // 不同主题
            themesList:[
                {
                    name:'default',
                    style:{
                        body:{
                            'color':'#000','background':'#fff'
                        }
                    }
                }, {
                    name:'eye',
                    style:{
                        body:{
                            'color':'#000','background':'green'
                        }
                    }
                }, {
                    name:'night',
                    style:{
                        body:{
                            'color':'#fff','background':'#000'
                        }
                    }
                }, {
                    name:'gold',
                    style:{
                        body:{
                            'color':'#000','background':'rgb(241,236,226)'
                        }
                    }
                }   
            ],
            // 默认主题
            defaultTheme:0
        }
    },
    methods:{
        showEpub(){
            //生成book
            this.book=new Epub(DOWNLOAD_URL)
            //生成rendition,通过Book.RenderTo
            this.rendition=this.book.renderTo('read',{
                width:window.innerWidth,
                height:window.innerHeight
            })
            //通过Rendition.display渲染电子书
            this.rendition.display();
            //获取theme对象
            this.themes=this.rendition.themes;
            //设置默认字体
            this.setFontSize(this.defaultFontSize);
            // this.themes.register(name,styles)设置主题
            // this.themes.select(name)切换主题
            this.registerTheme();
            this.setTheme(this.defaultTheme)
        },
        prevPage(){
            if(this.rendition){
                this.rendition.prev()
            }
        },
        nextPage(){
            if(this.rendition){
                this.rendition.next()
            }
        },
        toggleIshow(){
            this.ishow=!this.ishow;
            if(!this.ishow){
                this.$refs.menubar.hiddleSetting()
            }
        },
        setFontSize(fontsize){
            this.defaultFontSize=fontsize;
            if(this.themes){
                this.themes.fontSize(fontsize+'px')
            }
        },
        registerTheme(){
            this.themesList.forEach((theme)=>{
                this.themes.register(theme.name,theme.style)
            })
        },
        setTheme(index){
            this.themes.select(this.themesList[index].name);
            this.defaultTheme=index
        }
    },
    mounted(){
        this.showEpub()
    }
}
</script>

<style lang="scss" scoped>
@import 'assets/style/global';
.ebook{
    position: relative;
    .read-wrapper{
        .mask{
            position:absolute;
            top:0;
            left: 0;
            z-index: 100;
            width:100%;
            height:100%;
            display:flex;
            .left{
                flex:0 0 px2rem(100);
            }
            .center{
                flex:1;
            }
            .right{
                flex:0 0 px2rem(100);
            }
        }
    }
    
}
</style>